<template>
  <Common class="timeline-wrapper" :sidebar="false">
    <ul class="timeline-content">
      <ModuleTransition >
        <li v-show="recoShowModule" class="desc">征程岁月</li>
      </ModuleTransition>
      <ModuleTransition
        :delay="String(0.08 * (index + 1))"
        v-for="(item, index) in $recoPostsForTimeline"
        :key="index">
        <li v-show="recoShowModule">
          <h3 class="year"><div>{{item.year}}</div></h3>
          <ul class="year-wrapper">
            <li v-for="(subItem, subIndex) in item.data" :key="subIndex">
              <span class="date">{{subItem.frontmatter.date | dateFormat}}</span>
              <span class="title" @click="go(subItem.path)">{{subItem.title}}</span>
            </li>
          </ul>
        </li>
      </ModuleTransition>
    </ul>
  </Common>
</template>

<script>
import Common from '@theme/components/Common'
import ModuleTransition from '@theme/components/ModuleTransition'
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'

export default {
  mixins: [moduleTransitonMixin],
  name: 'TimeLine',
  components: { Common, ModuleTransition },
  filters: {
    dateFormat(date, type) {
      function renderTime(date) {
        const dateee = new Date(date).toJSON()
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/-/g, '/')
      }
      date = renderTime(date)
      const dateObj = new Date(date)
      const mon = dateObj.getMonth() + 1
      const day = dateObj.getDate()
      return `${mon}-${day}`
    }
  },
  methods: {
    go(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style src="../styles/theme.styl" lang="stylus"></style>

<style lang="stylus" scoped>
@require '../styles/wrapper.styl';

.timeline-wrapper {
  max-width: $contentWidth;
  margin: 0 auto;
  padding: 4.6rem 2.5rem 0;

  .timeline-content {
    box-sizing: border-box;
    position: relative;
    list-style: none;

    &::after {
      content: ' ';
      position: absolute;
      top: 14px;
      left: 0;
      z-index: -1;
      margin-left: -2px;
      width: 4px;
      height: 100%;
      background: var(--border-color);
    }

    .desc, .year {
      position: relative;
      color: var(--text-color);
      font-size: 16px;

      &:before {
        content: ' ';
        position: absolute;
        z-index: 2;
        left: -20px;
        top: 50%;
        margin-left: -4px;
        margin-top: -4px;
        width: 8px;
        height: 8px;
        background: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: 50%;
      }
    }

    .year {
      margin: 20px 0 0px;
      color: var(--text-color);
      font-weight: 700;
      font-size: 15px;
      text-align: center;
      line-height: 70px;

      div {
        border-radius: 50%;
        max-width: 70px;
        height: 70px;
        animation: scaleDraw 2.5s linear infinite; // 放大
        background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
      }
    }
  }
}

// 放大
@keyframes scaleDraw {
  0% {
    transform: scale(0.75);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(0.75);
  }
}

.year-wrapper {
  padding-left: 0 !important;

  li {
    display: flex;
    padding: 30px 0 10px;
    list-style: none;
    border-bottom: 1px dashed var(--border-color);
    position: relative;

    &:hover {
      .date {
        color: $accentColor;

        &::before {
          background: $accentColor;
        }
      }

      .title {
        color: $accentColor;
      }
    }

    .date {
      width: 40px;
      line-height: 30px;
      color: var(--text-color-sub);
      font-size: 12px;

      &::before {
        content: ' ';
        position: absolute;
        left: -18px;
        top: 41px;
        width: 6px;
        height: 6px;
        margin-left: -4px;
        background: var(--background-color);
        border-radius: 50%;
        border: 1px solid var(--border-color);
        z-index: 2;
      }
    }

    .title {
      line-height: 30px;
      color: var(--text-color-sub);
      font-size: 16px;
      // cursor pointer
    }
  }
}

@media (max-width: $MQMobile) {
  .timeline-wrapper {
    margin: 0 1.2rem;
  }
}
</style>
